<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div
        class="perheader"
        :style="[
          { background: 'url(static/img/bj.png) no-repeat center center' }
        ]"
      >
        <div class="perheaderContainer">
          <div class="perheaderContainerLeft">
            <img :src="apihost+avatar" alt srcset />
            <p>
              vip等级：
              <span>VIP {{ level }}</span>
            </p>
          </div>
          <div class="perheaderContainerCenter">
             <p>账户：{{ user.username }}</p>
            <p>总金额：{{ amount_total }}</p>
          </div>
          <div class="perheaderContainerRight opeat">
            <van-button type="primary" to="/user/recharge" size="mini">充值</van-button>
            <van-button type="danger" to="/user/withdrawal" size="mini" style="margin-left:0;">提现</van-button>
          </div>
        </div>
      </div>
      <div class="navList" style="top: -0.75rem;">
        <van-row>
          <van-col span="8" class="navLi br">
            <p>{{ mount.waitOrderAmount || 0 | money("¥") }}</p>
            <p>待收本金(元)</p>
          </van-col>
          <van-col span="8" class="navLi br">
            <p>{{ mount.waitReap || 0 | money("¥") }}</p>
            <p>待收分红(元)</p>
          </van-col>
          <van-col span="8" class="navLi br">
            <p>{{ mount.reapAmount || 0 | money("¥") }}</p>
            <p>累计收益(元)</p>
          </van-col>
        </van-row>
      </div>
      <div class="navList">
        <div class="title">我的任务</div>
        <div class="iconList">
          <van-row>
            <router-link v-for="(item, index) in navList" :key="index" :to="item.path">
              <van-col span="6" class="navLi">
                <van-icon :name="item.url" size="1rem" />
                <p>{{ item.title }}</p>
              </van-col>
            </router-link>
          </van-row>
        </div>
      </div>
      <div class="navList" style="margin-top:.75rem;">
        <div class="title">我的工具</div>
        <div class="iconList">
          <van-row>
            <router-link v-for="(item, index) in utilList" :key="index" :to="item.path">
              <van-col span="6" class="navLi">
                <van-icon
                  :name="item.url"
                  size="1rem"
                  :info="item.info>9?'...':item.info"
                  v-if="item.info"
                />
                <van-icon :name="item.url" size="1rem" v-else />
                <p>{{ item.title }}</p>
              </van-col>
            </router-link>
          </van-row>
        </div>
      </div>
      <div class="btnPay" @click="exitLogin">退出登录</div>
    </van-pull-refresh>
  </div>
</template>
<script>
import bj from "@/assets/icon/bj.png";
import _ from "lodash";
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapGetters, mapState } = createNamespacedHelpers("user");
import { API_HOST } from "@/store/mutation-types";
export default {
  data() {
    return {
      isLoading: false,
      apihost: "",
      bj,
      navList: [
        { url: "shopping-cart-o", title: "我的投资", path: "/user/investment" },
        { url: "newspaper-o", title: "租金分红记录", path: "/user/abonus" },
        {
          url: "balance-list-o",
          title: "资金流水记录",
          path: "/user/userfundlist"
        },
        { url: "todo-list-o", title: "推广记录", path: "/user/promotionRecord" }
      ],
      utilList: [
        { url: "idcard", title: "我的银行卡", path: "/user/myBankcard" },
        { url: "gold-coin-o", title: "我要充值", path: "/user/recharge" },
        {
          url: "cash-back-record",
          title: "我要提现",
          path: "/user/withdrawal"
        },
        { url: "contact", title: "推广好友", path: "/user/invitation" },
        { url: "envelop-o", title: "站内信", path: "/user/email", info: 0 },
        { url: "aim", title: "账户安全", path: "/user/security" }
      ]
    };
  },
  computed: {
    ...mapGetters(["amount_total"]),
    ...mapState({
      user: "info",
      avatar: "avatar",
      level: "level",
      mount: "mount"
    })
  },
  mounted() {
    this.GetBaseInfo().then(res => {
      _.find(this.utilList, { path: "/user/email" }).info = res.data.readMsg;
    });
    this.GetInfo();
    this.apihost = this.$ls.get(API_HOST);
    if (!this.apihost) {
      this.$store.dispatch("GET_CONF").then(res => {
        this.apihost = res.data.apihost;
      });
    }
  },
  methods: {
    onRefresh() {
      Promise.all([this.GetBaseInfo(), this.GetInfo()]).then(() => {
        this.isLoading = false;
      });
    },
    ...mapActions(["Logout", "GetInfo", "GetBaseInfo"]),
    exitLogin() {
      this.$dialog
        .confirm({
          message: "是否退出登录"
        })
        .then(() => {
          this.Logout().then(() => {
            this.$dispatch("socketDisConect");
            this.$router.push({ path: "/" });
          });
        });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~styles/index.less";
@import "~styles/variable.less";
.perheader {
  background-size: cover;
  padding: 0.5rem 0 1.5rem;
  .perheaderContainer {
    width: 95%;
    margin: 0 auto;
    // padding: 0 0.2rem;
    display: flex;
    align-items: center;
    .perheaderContainerLeft {
      text-align: center;
      font: 600 0.35rem/1.2 "Microsoft YaHei";
      img {
        width: 80px;
        border-radius: 100%;
      }
    }
    .perheaderContainerCenter {
      flex: 1;
      text-align: center;
      font: 800 0.5rem/1.5 "Microsoft YaHei";
      // margin-left:20px;
    }
    .perheaderContainerRight {
      width: 50px;
      
      button {
        display:block;
        margin-bottom: 0.2rem;
      }
    }
  }
}
// .avatar {
//   text-align: center;
//   img {
//     width: 1.6rem;
//     border-radius: 100%;
//     vertical-align: center;
//   }
//   span {
//     color: #ffee06;
//   }
//   font: 600 0.35rem/1.2 "Microsoft YaHei";
// }
.username {
  color: #333;
  padding-top: 0.5rem;
  font: 800 0.5rem/1.5 "Microsoft YaHei";
}
.opeat {
  text-align: right;
  padding-top: 0.5rem;
  button {
    margin-bottom: 0.2rem;
  }
}
.navList {
  width: 98%;
  margin: 0 auto;
  background: #fff;
  position: relative;

  border-radius: 10px;
  .navLi {
    font: 800 0.3rem/2 "微软雅黑";
    color: #333;
    padding: 0.3rem 0;
    text-align: center;
  }
  .br {
    border-right: 1px solid #eee;
    &:nth-last-child(1) {
      border: none;
    }
  }
  .title {
    border-bottom: 1px solid #eee;
    font: 400 0.38rem/2 "微软雅黑";
    padding: 0.2rem;
  }
  .iconList {
    padding: 0.2rem 0;
    text-align: center;
  }
}

/deep/ .van-info {
  font-size: 0.32rem;
}
</style>
